import { apiStore } from '@/utils/store/apiStore'
import {
    Cascader,
    CascaderProps,
    Checkbox,
    Divider,
    Input,
} from '@arco-design/web-react'
import React from 'react'

export interface ISelectGroupState {
    // 选中的组id
    id?: string[]
    // 是否添加分组
    addGroup?: boolean
    // 新分组名称
    newGroupName?: string
}

export interface ISelectGroupProps
    extends Omit<CascaderProps, 'options' | 'value' | 'onChange' | 'mode'> {
    value?: ISelectGroupState
    onChange?: (value: ISelectGroupState) => void
}

const SelectGroup: React.FC<ISelectGroupProps> = ({
    defaultValue,
    value: propsValue,
    onChange: propsOnChange,
    ...props
}) => {
    // 选项
    const [options, setOptions] = useState<CascaderProps['options']>([
        {
            label: '根',
            value: '',
        },
    ])
    // // 值
    // const [value, setValue] = useState<string[] | undefined>(propsValue?.id || [''])
    // // 新分组名称
    // const [newGroupName, setNewGroupName] = useState(propsValue?.newGroupName)
    // // 是否添加分组
    // const [addGroup, setAddGroup] = useState(propsValue?.addGroup)

    // 加载更多
    const loadMore = async (pathValue: string[] = ['']) => {
        const parentId = pathValue?.[pathValue.length - 1] || ''
        const list = await apiStore.getList(parentId)
        const groups = list.filter((v) => v.type === 'group')
        const children = groups.map((v) => {
            return {
                label: v.label,
                value: v.id,
            }
        })
        return children
    }

    // 初始化
    // useEffect(() => {
    //     // getGroups().then(setOptions)
    // })

    return (
        <Cascader
            {...props}
            placeholder='请选择'
            options={options}
            value={propsValue?.id}
            onChange={(val) =>
                propsOnChange?.({
                    ...propsValue,
                    id: val as string[],
                })
            }
            changeOnSelect
            allowClear
            loadMore={(val) => loadMore(val as string[])}
            dropdownRender={(menu) => {
                return (
                    <div>
                        {menu}
                        <Divider style={{ margin: 0 }} />
                        <div className='flex items-center my-1'>
                            <Checkbox
                                checked={propsValue?.addGroup}
                                onChange={(v) =>
                                    propsOnChange?.({
                                        ...propsValue,
                                        addGroup: v,
                                    })
                                }
                                className='flex-shrink-0 mr-2'
                            >
                                添加分组
                            </Checkbox>

                            <Input
                                placeholder='请输入分组名称'
                                value={propsValue?.newGroupName}
                                onChange={(v) =>
                                    propsOnChange?.({
                                        ...propsValue,
                                        newGroupName: v,
                                    })
                                }
                                disabled={!propsValue?.addGroup}
                            />
                        </div>
                    </div>
                )
            }}
            renderFormat={(valueShow) => {
                if (propsValue?.addGroup && propsValue?.newGroupName) {
                    valueShow.push('+' + propsValue?.newGroupName)
                }
                return valueShow.join(' / ')
            }}
        />
    )
}

export default SelectGroup
